<template>
<div class="right-card">
    <el-card shadow="hover">
        <Header @view-change="handleViewChange" ></Header>
    <component :is="currentComponent" />
    </el-card>
    
  </div>
</template>

<script setup>
import First from './First.vue';
import Second from './Second.vue';
import Header from './Header.vue';
import { ref } from 'vue';
const currentComponent = ref(First);

const handleViewChange = (value) => {
  if (value === 'category') {
    currentComponent.value = First;
  } else {
    currentComponent.value = Second;
  }
}
</script>

<style scoped>
.right-card {
  width: 50%;
}
</style>
